<template>
  <h2>用户信息</h2>
  <p>姓名：{{ userInfo.name }}</p>
  <p>性别：{{ userInfo.sex }}</p>
  <p>薪资：{{ userInfo.job.web.salary }}K</p>
  <p>
    <button @click="updateName">修改姓名</button>
    <button @click="updateSalary">修改薪资</button>
  </p>

  <p>
    count={{ count }}
    <button @click="setCount">+1</button>
  </p>
</template>

<script>

import {shallowReactive, shallowRef} from "vue";

export default {
  name: "Demo",
  setup() {
    // shallowReactive 只响应第一层
    // 例如修改 job.web.salary 就不会响应
    // 如果明确该对象只会有一层数据，就可以使用shallowReactive，它的逻辑比较简单，渲染时速度略快
    /*const userInfo = shallowReactive({
      name: '米色',
      sex: '男',
      job: {
        web: {
          salary: 10
        }
      }
    })*/

    // shallowRef，只处理基础数据类型，如果给了复杂数据，数据也不会响应
    const count = shallowRef(0)
    const setCount = () => {
      count.value += 1
    }

    const userInfo = shallowRef({
      name: '米色',
      sex: '男',
      job: {
        web: {
          salary: 10
        }
      }
    })

    const updateName = () => {
      userInfo.name += '-'
    }

    const updateSalary = () => {
      userInfo.job.web.salary += 1
    }

    return {
      userInfo,
      updateName,
      updateSalary,
      count,
      setCount
    }
  }
}
</script>

<style scoped>

</style>